
<template>
	<view class="animated fadeIn fast" >

			<!--背景&&指针&&转盘-->
			<playing-pic @isLyricShow="isShow"  :isLyricShow="isLyricShow"></playing-pic>
			
			<!--其他事件-->
			<playing-row @prOpen="playRelevantOpen" ></playing-row>
			
			<!--歌词-->
  			<x-lyric  @isLyricShow="isShow" :isLyricShow="isLyricShow" ref="bar" :lyric="lyric" />
 
			<!--进度条-->
			<playing-progres @timeUpdate="timeUpdate" ref="bac"></playing-progres>
			
			<!--操作事件-->
			<playing-compoents   @plOpen="playlistOpen" @play="play" @setId='hanlePlayinginfo'>
			</playing-compoents>
			
			<!--歌曲信息-->
			<playing-info  :isPlayRelevantShow="isPlayRelevantShow" @prColse="playRelevantClose"
			></playing-info>
			
			<!--播放列表-->
			<playing-list  :isPlaylistShow="isPlaylistShow" @plColse="playlistClose" 
			@switch='hanlePlayinginfo'></playing-list>
			<!--模板-->
			<view class="mould" v-show="isPlaylistShow||isPlayRelevantShow" @tap="close"></view>
		
	</view>
</template>

<script>
	import playingPic from '../../components/playing/playing-pic/playing-pic.vue';
	import playingList from '../../components/playing/playing-list/playing-list.vue';
	import playingInfo from '../../components/playing/playing-info/playing-info.vue';
	import playingRow from '../../components/playing/playing-row/playing-row.vue';
	import playingCompoents from '../../components/playing/playing-compoents/playing-compoents.vue';
	import playingProgres from '../../components/playing/playing-progress/playing-progress.vue';
	import  xLyric from '../../components/playing/playing-lyric/playing-lyric.vue';
	import { mapState } from 'vuex';
	let audioCtx=uni.getBackgroundAudioManager();
	let  app =getApp();
	export default {
		components:{
			playingPic,
			playingList,
			playingInfo,
			playingRow,
			playingCompoents,
			playingProgres,
			xLyric
		},
		computed: {
			...mapState(['idInfo']),
		},
		data() {
			return {					
				//列表开关
				isPlaylistShow:false,
				isPlayRelevantShow:false,
				//表示当前歌词 与是否显示
				isLyricShow: false, 
				lyric: '',
			}
		},
		onLoad(options) {
			//专辑 歌单 每日歌单 哪个路径跳转
			const playListId=options.playListId;
			const albumListId=options.aid;
			const daySongId=options.daySongId;
			//传递歌曲id
			const playingId=options.playId;
			
			if(daySongId==1){
				if(daySongId!=this.idInfo.daySongId){
					this.getdailySonge();
				}
			}
			else if(playListId!=0&&albumListId==0){
				if(playListId!=this.idInfo.playListId){
					this.handlePlaylist(playListId);
				}
			}
			else if(albumListId!=0&&playListId==0){
				if(albumListId!=this.idInfo.albumListId){
					this.getalbum(albumListId);
				}
			}
			else{
				let listinfo={
					playIdList:[playingId],
					playlist:''
				}
				this.setList(listinfo);
			}
			//如果是同一首歌
			let playingIdd=app.globalData.playingId;
			if(playingId==playingIdd){
				uni.setNavigationBarTitle({
					title:this.$store.state.musicInfo.playingName
				})
				this.lyric=uni.getStorageSync("lyric")
			}
			else{
				this.hanlePlayinginfo(playingId,false)
			}
			//小播放器同步数据存入vuex中
			let idInfo={
				albumListId,
				playListId,
				daySongId,
			};
			this.$store.commit('setPlayinfo', idInfo)
		},
/* 		onShow() { 
		}, */
		methods: {
			//获取当前播放歌曲图片和名字
			async hanlePlayinginfo(id,Single){
				//先获取音乐信息在获取音乐地址
				await this.getlayinginfo(id,Single)
				//只有先获取歌曲信息才能取获取歌曲url
			    getApp().globalData.playingId = id;
			},
			//获取图片等信息
			async getlayinginfo(id,Single){
				if(!Single){
					const playinfo=await this.request({url: this.bsurl+'song/detail?ids='+id});
					let musicInfo={
						 playingImg:playinfo.songs[0].al.picUrl+'?param=200y200',
						 playingPic:playinfo.songs[0].al.picUrl+'?param=300y500',
						 playingName:playinfo.songs[0].name,
						 playingAlbumName:playinfo.songs[0].al.name,
						 playingAlbumId:playinfo.songs[0].al.id,
						 playingAuthor:playinfo.songs[0].ar[0].name,
						 playingAuthorId:playinfo.songs[0].ar[0].id,
					}
					this.$store.commit('setMusicInfo', musicInfo)
					uni.setNavigationBarTitle({
						title: playinfo.songs[0].name
					})
					//获取歌词
					this.getLyric(id);
				}
				else{
					return
				}
			},
			//获取歌词
			async getLyric(id){
				const result=await this.request({url: this.bsurl+'lyric?id='+id});
				this.lyric=result.nolyric?"纯音乐,请欣赏":result.lrc.lyric;
				//缓存歌词
				uni.setStorageSync("lyric",this.lyric);
			},
			//播放后才能获取总时长
			play(){
				this.$refs.bac.getallTiem()
			},
			//歌词联动
			timeUpdate(event) {
				this.$refs.bar.update(event.currentTime);
			},	
			//如果是每日歌单
			async getdailySonge(){
				const result=await this.request({url: this.bsurl+'recommend/songs'}); 
				let playIdList=result.recommend.map(v=>v.id)
				let playlist=result.recommend.map(v=>{
				  return {
					id:v.id,
					name:v.name,
					author:v.artists[0].name,
				  }
				});
				let listinfo={
					playIdList,
					playlist
				}
				this.setList(listinfo);
			},
			//从歌单id获取歌曲列表id
			async handlePlaylist(playListId){
			    const playlistinfo=await this.request({url: this.bsurl+'playlist/detail?id='+playListId});
				const playIdList=playlistinfo.privileges.map(v=>v.id);
			    const playlist=playlistinfo.playlist.tracks.map(v=>{
			      return {
			        id:v.id,
			        name:v.name,
			        author:v.ar[0].name
			      }
			    });
				let listinfo={
					playIdList,
					playlist
				}
				this.setList(listinfo);
			},
			//如果是专辑就获取专辑信息
			async getalbum(albumListId){
			    const playlistinfo=await this.request({url: this.bsurl+'album?id='+albumListId});
				const playIdList=playlistinfo.songs.map(v=>v.id);
			    const playlist=playlistinfo.songs.map(v=>{
			      return {
			        id:v.id,
			        name:v.name,
			        author:v.ar[0].name
			      }
			    });
				let listinfo={
					playIdList,
					playlist
				}
				this.setList(listinfo);
			},
			//设置播放id列表和信息
			setList(listinfo){
				this.$store.commit('setPlaylist', listinfo.playlist)
				this.$store.commit('setPlayIdList', listinfo.playIdList)		
			},
			//开启详情
			playRelevantOpen(){
			   this.isPlayRelevantShow=true;
			},
			//关闭详情
			playRelevantClose(){
			   this.isPlayRelevantShow=false;
			},
			//开启列表
			playlistOpen(){
			   this.isPlaylistShow=true;
			},
			//关闭列表
			playlistClose(){
			    this.isPlaylistShow=false;
			},
			//关闭模板
			close(){
			    this.isPlayRelevantShow=false;
			    this.isPlaylistShow=false;
			},
			//歌词显示
			isShow(){
				this.isLyricShow=!this.isLyricShow;
			},
		}
	}
</script>

<style lang="less">
	.mould{
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 20;
		background-color: #0000007a;
	}
</style>